

.box {
	.transition(box-shadow 0.2s ease-out 0.1s);

	

}
.box_header,.box_detail,.box_footer{
		clear: both;
}
/* 状态-----------------------------------------------------------------*/
	
/* theme----------------------------------------------------------------*/
	/* apple_style 
	===============================*/

	.apple_style {
		display: block;
		position: relative; 
		border-radius: 5px;
		color: #333;
		line-height: 1.5;
		box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
		border-style:solid; 
		border-width:1px; 
		border-color:#E5E5E5 #DBDBDB #D2D2D2;
		font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 
		-webkit-font-smoothing: antialiased;
		  background-color: #FDFDFD;
		  background-image: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#F4F4F4)); 
		  background-image: -webkit-linear-gradient(top, #FDFDFD, #F4F4F4); 
		  background-image:    -moz-linear-gradient(top, #FDFDFD, #F4F4F4); 
		  background-image:     -ms-linear-gradient(top, #FDFDFD, #F4F4F4); 
		  background-image:      -o-linear-gradient(top, #FDFDFD, #F4F4F4); 
		  background-image:         linear-gradient(top, #FDFDFD, #F4F4F4);
		            filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='#FDFDFD', EndColorStr='#F4F4F4')"; 
		/* 之前和之后伪类 
		----------------------------------------*/
		&:before, &:after {
			display: block;
			z-index: -1;
			position: absolute;
			content: "";
			bottom: 15px;
			left: 10px;
			width: 50%;
			top: 50%;
			max-width:300px;
			background: rgba(0, 0, 0, 0.7);
			box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
			-webkit-transform: rotate(-3deg);
			-moz-transform: rotate(-3deg);
			-o-transform: rotate(-3deg);
		}
		&:after{
			-webkit-transform: rotate(3deg);
			-moz-transform: rotate(3deg);
			-o-transform: rotate(3deg);
			right: 10px;
			left: auto;
		}

		.inner{
			 border:1px solid #fff;
			 border-radius: 5px;
		}

		/* 鼠标悬停 
		-----------------------------------------*/
		&:hover,&.hover{
			box-shadow:0 1px 10px rgba(0,0,0,.9);
		}
/*--------------------------------------------------------------------------------------*/
	/* html元素
	----------------------------------------------------------*/

		/* 连接
		-----------------------------------------*/
		a{
			color: #08c;
			&:link,&:visited,&:active,a:focus{
				text-decoration: none;
			}
			&:hover{
				text-decoration: underline;
			}
		}

		.image-wrap{
			border-radius:5px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
		}

		/* 选卡 
		--------------------------------------*/
		.tab{ 
			text-align:center; padding-top:20px;
			a{
				display:inline-block; 
				padding:5px 20px;
				margin-left:-5px;
				border:1px solid #cfcfcf; 
				font-size:14px; 
				text-align:center; 
				text-decoration:none; 
			    -moz-box-shadow:1px 0 0 #fff; -webkit-box-shadow:1px 0 0 #fff; box-shadow:1px 0 0 #fff inset;
			    background-color:#f8f8f8;
			    background:-webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f4f4f4));
			    background:-moz-linear-gradient(100% 100% 90deg, #fefefe, #f4f4f4); 

				&:first-child {border:1px solid #cfcfcf; border-radius:6px 0 0 6px; }
				&:last-child { border:1px solid #cfcfcf; border-radius:0 6px 6px 0; }
				&:hover { 
					color:#0088cc; 
				    -moz-box-shadow:1px 0 0 #fff; -webkit-box-shadow:1px 0 0 #fff; box-shadow:1px 0 0 #fff; 
				    background-color:#fcfcfc;
				    background:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fafafa));
				    background:-moz-linear-gradient(100% 100% 90deg, #fff, #fafafa); 
				}
				&:active,&.selected{
					color:#fff; cursor:default; text-decoration:none; border:1px solid transparent; *border:1px solid #cfcfcf;
				    -moz-box-shadow:0 1px 9px rgba(0, 0, 0, 0.52) inset; -webkit-box-shadow:0 1px 9px rgba(0, 0, 0, 0.52) inset; box-shadow:0 1px 9px rgba(0, 0, 0, 0.52) inset; 
				    background-color:#666;
				    background:-webkit-gradient(linear, 0 0, 0 100%, from(#7b7b7b), to(#545454));
				    background:-moz-linear-gradient(100% 100% 90deg, #7b7b7b, #545454); 

				}

				em{ font-style:normal; font-size:12px; display:block; opacity:.5;filter:alpha(opacity=50);}
			}
		}




	.tab_detail{ padding:2em 10px; margin-top:-2em; background:#fff;border:1px solid #ebebeb}
 	table{
 		td { 
				padding:30px 32px 30px 32px; 
				font-size:1em; 
				vertical-align:top; 
				border-left:1px solid #bfbfbf; 
				border-top:1px solid #bfbfbf; 
			}
			tr{
				&.odd{ 
					background:#fff;
				}
				&:nth-child(1) td:nth-of-type(1) { 
						background:#f4f4f4;
				}
				&:nth-of-type(1) { 
					background:#eee; border-left:none; 
				}
				&:nth-last-child(1) td:nth-of-type(1) { 
					background:#f4f4f4; 
				}
				&.bottom {
					th,td{
						border-bottom:none; 
					}
				} 
			}
			th { 
				padding:30px 25px; 
				vertical-align:top;
				h2 { 
					font-size:1.5em; 
					font-weight:normal; 
				} 
			}
		}

		/* 翻页
		-----------------------------------------*/
		.page{
				background-color: #EDEDED;
			 	background-image: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#D8D8D8)); 
				background-image: -webkit-linear-gradient(top, #EDEDED, #D8D8D8); 
				background-image:    -moz-linear-gradient(top, #EDEDED, #D8D8D8); 
				background-image:     -ms-linear-gradient(top, #EDEDED, #D8D8D8); 
				background-image:      -o-linear-gradient(top, #EDEDED, #D8D8D8); 
				background-image:         linear-gradient(top, #EDEDED, #D8D8D8);
	            filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='#EDEDED', EndColorStr='#D8D8D8')"; 
	         .stats{ background:#eee; border:1px solid #A1A1A1;}
	         a,span{padding:0 1em;border-radius: 10px; color:#727272;}
	         a {
			    	&:hover 				   { color:#2971a7;}
			    	&.selected,&.selected:hover{ background:#A1A1A1; color:#fff; text-decoration:none;}
			    }

		}
/*------------------------------------------------------------------------------------*/
		/* 头部
		-----------------------------------------*/
		.box_header{
			border-bottom: 1px solid #e4e4e4;  
			padding: 5px; 
			border-radius: 5px 5px 0 0;
			.title{
				font:bold 18px/25px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; 
				margin-bottom: 0; 
			}
		}

		/* 导航
		----------------------------------------*/
		.box_nav{ 
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}

		/* 内容
		----------------------------------------*/
		.box_detail{
				padding: 10px;
		}
		/* 脚部
		----------------------------------------*/
		.box_footer{
			padding:5px 10px;
			border-radius: 0 0 5px 5px;
			text-shadow: 0 1px 0 #FFFFFF;
			background:#fff; 
			background:-moz-linear-gradient(center bottom, rgba(223,223,223,1) 0%, rgba(242,242,242,1) 66%, rgba(242,242,242,1) 90%, rgba(230,230,230,1) 93%, rgba(190,190,190,1) 96%, rgba(150,150,150,1) 100%);
			background:-webkit-gradient(linear, left bottom, left top, from(rgba(223,223,223,1)), color-stop(66%, rgba(242,242,242,1)), color-stop(90%, rgba(242,242,242,1)), color-stop(93%, rgba(230,230,230,1)), color-stop(96%, rgba(210,210,210,1)), to(rgba(140,140,140,1)));
			border-bottom:1px solid #ebebeb;
			margin: -2px;
		}



		/* 状态
		---------------------------------------*/
		&.waring{ border-color:#FC0; box-shadow:0 0 5px #FF3; background:#FFFFB5;}
		&.waring:before,&.waring:after {
			z-index: 	-1;
			position: 	absolute;
			content: 	"";
			bottom: 	15px;
			left: 		10px;
			width: 		50%;
			top: 		15%;
			max-width:	300px;
			background: rgba(0, 0, 0, 0.7);
			box-shadow: 0 15px 10px #FC0;
			-webkit-transform: rotate(-3deg);
			-moz-transform: rotate(-3deg);
			-o-transform: rotate(-3deg);
		}
		&.waring:after {
			-webkit-transform: rotate(3deg);
			-moz-transform: rotate(3deg);
			-o-transform: rotate(3deg);
			right: 10px;left: auto;
		}
		&.waring .title{ background:#FF3; color:#333;border-color:#FC0;}

		/* 子主题(继承)
		---------------------------------------------------------*/	
		/* 黑色
		--------------------------------*/	
		&.black{
			border-color:#5E5E5E;

			.inner{
				border:none;
			}
			.box_header{
				background-color: #7D7D7D;
					  background-image: -webkit-gradient(linear, left top, left bottom, from(#7D7D7D), to(#5E5E5E)); 
					  background-image: -webkit-linear-gradient(top, #7D7D7D, #5E5E5E); 
					  background-image:    -moz-linear-gradient(top, #7D7D7D, #5E5E5E); 
					  background-image:     -ms-linear-gradient(top, #7D7D7D, #5E5E5E); 
					  background-image:      -o-linear-gradient(top, #7D7D7D, #5E5E5E); 
					  background-image:         linear-gradient(top, #7D7D7D, #5E5E5E);
					            filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr='#7D7D7D', EndColorStr='#5E5E5E')";
				.title{
					color: #fff;
					text-shadow: #000 1px 1px 2px;
				}
			}
			.box_footer{
				margin: 0;
			}
			
		}
		/* 黑色 end
		--------------------------------*/	

	}

	
/* aero_style 
========================================*/
	.aero_style{
		font-family: "Hiragino Sans GB", "Microsoft Yahei","微软雅黑", sans-serif;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		border-radius:5px;
		border:1px solid rgba(0,0,0,0.4);
		position: relative;
		z-index:1;

		.inner{
			border:1px solid rgba(255,255,255,0.6);
			border-radius:5px;
			padding:0 6px 6px;
		}

		&:hover{
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
			border:1px solid rgba(0,0,0,0.9);

			.inner{
				border:1px solid rgba(255,255,255,.8);
			}
		}

		.box_header{
			.title{ 
				display: inline-block;
				color: #000;
				text-shadow:0 0 5px rgba(255,255,255,1);
				font-size:14px ;
				margin: -5px;
				-moz-border-image: url(../images/aero/title_bg.png)  10  15 stretch;
				-webkit-border-image:url(../images/aero/title_bg.png)  10  15 stretch;
				-o-border-image: url(../images/aero/title_bg.png) 10 15 stretch;
				border-width: 10px 15px;
				border-style:solid;
				border-color: transparent;
			}
		}

		/* 导航
		----------------------------------------*/
		.box_nav{ 
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}

		.box_footer{
			color: #5A6779;
			background-color: #F1F5FB;
			margin-top:-1px;
			box-shadow:inset 0 3px 3px #CCD9EA,0 0 2px #fff;
			padding: 10px;
			line-height:18px;
			border-width:0 1px 1px 1px;
			border-style:solid;
			border-color:rgba(0,0,0,.5);
			strong{
				color: #1E395B;
			}
		}

		.box_detail{ 
			background-color: #fcfcfc;
			box-shadow:0 0 2px #fff;
			border:1px solid rgba(0,0,0,.5);
			padding: 10px;
		}
	}

/* star_craft 
========================================*/


	.star_craft2{
		@theme_sc2_t:			"../images/star_craft2/bg-video-frame-t.gif";
		@theme_sc2_title_l:		"../images/star_craft2/title_l.gif";
		@theme_sc2_bl:			"../images/star_craft2/bg-video-frame-bl.gif";
		@theme_sc2_br:			"../images/star_craft2/bg-video-frame-br.gif";
		@theme_sc2_l:			"../images/star_craft2/bg-video-frame-l.gif";
		@theme_sc2_b:			"../images/star_craft2/bg-video-frame-b.gif";
		@theme_sc2_r:			"../images/star_craft2/bg-video-frame-r.gif";
		@theme_sc2_tl: 			"../images/star_craft2/bg-video-frame-tl.gif";
		@theme_sc2_tr: 			"../images/star_craft2/bg-video-frame-tr.gif";
		@theme_sc2_glass: 		"../images/star_craft2/frame-screenshot-p-glass.png";
		color: #0C73AF;
		font-family: "Hiragino Sans GB", "Microsoft Yahei","微软雅黑", sans-serif;
		background: #00629E url("@{theme_sc2_l}") left top no-repeat;
		padding:4px;
		position: relative;
		z-index:1;
		box-shadow:0 0 10px rgba(0,0,0,.8);

		&:before{
			position: 	absolute;
			z-index:	1;
			content: 	"";
			background:	url("@{theme_sc2_t}")  right top no-repeat;
			top:		0;
			left:		30px;
			width:		225px;
			height:		4px;
		}
		&:after{
			position: 	absolute;
			z-index:	1;
			content: 	"";
			background:	url("@{theme_sc2_l}")  right top no-repeat;
			top:		30px;
			left:		0;
			width:		4px;
			height:		95px;
		}

		&:hover{
			background-color: #0084B3;
			box-shadow:	0 0 10px rgba(0,0,0,1);
			.box_header{

				.title{
					text-shadow: 0 0 5px rgba(255,255,255,.8);
				}
			}
		}

		.inner{
			background: #000D20;

			
		}

		

		/* 连接
		-----------------------------------------*/
		a{
			color: #00D683;
			&:link,&:visited,&:active,a:focus{
				text-decoration: none;
			}
			&:hover{
				color: #fff;
				text-decoration: underline;
			}
		}

		.box_header{
			background: 	#06336A url("@{theme_sc2_glass}") left -3px repeat-x;
			border-bottom:	1px solid #075BBB;
			box-shadow:		0 5px 5px rgba(0,0,0,.5);
			.title{
				color: 			#fff;
				margin-bottom: 	0;
				display: 		black;
				padding: 		10px 20px;
				position: 		relative;
				z-index:		1;

				&:before{
					width:		15px;
					height:		45px;
					content: 	"";
					background:	url("@{theme_sc2_title_l}")  right top no-repeat;
					position: 	absolute;
					z-index:	1;
					bottom:		-45px;
					left:		0;
				}
			}

			&:before{
				width:		30px;
				height:		30px;
				content: 	"";
				background:	url("@{theme_sc2_tl}")  right top no-repeat;
				position: 	absolute;
				z-index:	1;
				top:		0;
				left:		0;
			}

			&:after{
					width:100px;
					height:	10px;
					content: 	"";
					background:url("@{theme_sc2_tr}")  right top no-repeat;
					position: absolute;
					z-index:1;
					top:0;
					right:0;
			}

		}

		/* 导航
		----------------------------------------*/
		.box_nav{ 
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}

		.box_detail{
			background: #000D20 url("@{theme_sc2_glass}") left -38px repeat-x;
			padding: 	10px 20px;
			color: 		#BFBFBF;
			font-size:	14px;
			box-shadow: inset 0 3px 5px #000;
			.detail{
				&:before{
					position: 	absolute;
					z-index:	1;
					content: 	"";
					background:	url("@{theme_sc2_bl}")  right top no-repeat;
					bottom:		0;
					left:		0;
					width:		10px;
					height:		60px;
				}
				&:after{
					position: 	absolute;
					z-index:	1;
					content: 	"";
					background:	url("@{theme_sc2_br}")  right top no-repeat;
					bottom:		0;
					right:		0;
					width:		12px;
					height:		12px;
				}
			}
		}
		.box_footer{
			background: #000D20;
			padding: 	10px 20px;
			&:before{
				position: 	absolute;
				z-index:	1;
				content: 	"";
				background:	url("@{theme_sc2_r}")  right top no-repeat;
				bottom:		12px;
				right:		0;
				width:		8px;
				height:		94px;
			}
			&:after{
				position: 	absolute;
				z-index:	1;
				content: 	"";
				background:	url("@{theme_sc2_b}")  right top no-repeat;
				bottom:		0;
				right:		12px;
				width:		94px;
				height:		8px;
			}

		}


	}

/* normal
---------------------------------------------------------------------------------------------- */
	.normal{ 
		border:1px solid #ccc; 
		background-color:#f8f8f8;



		.box_header{
			margin-bottom: 10px;
			.title{ 
				color:#333; 
				font-size:14px;
				margin-bottom: 0;
			}
		}

		/* 导航
		----------------------------------------*/
		.box_nav{ 
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}

		.inner{ 
			border:1px solid #fff;
			padding: 5px;
		}
		&:hover{ 
			box-shadow:0 0 5px rgba(0,0,0,.2);
		}
		/* html 元素
		------------------------------------*/
		.image-wrap{
			display:block;
			box-shadow:0 0 5px rgba(0,0,0,.5);
		}
		/* 继承主题
		-----------------------------*/
		&.gray{
			background-color:#f2f2f2;
			.inner{ 
				padding-left:10px; 
				padding-right:10px;
			}
		}
	}


/* normal2
------------------------------------------------------------------------------------------ */
	.normal2{ 
		border:1px solid #ccc; 
		background-color:#f2f2f2;

		.title{ 
			color:#333; font-size:14px;
		}
		.inner{ 
			border:1px solid #fff; 
			padding-left:10px; 
			padding-right:10px;
		}
	}

/* home
------------------------------------------------------------------------------------------------- */
	.home{ 
		border:1px solid #ccc; 
		background-color:#f4f4f4;

		.title{ 
			color:#333; 
			font-size:14px;
		}
		.inner{ 
			border:1px solid #fff;
		}
	}


/* model
-------------------------------------------------------------------------------------------------- */
	.model{
		border:1px solid #ccc;background:#fafafa;

		&:hover{
			box-shadow:0 0 5px rgba(0, 0, 0,.2);
		} 

		.box_header{ 
			padding:10px 0; border:1px solid #fff; background:#f5f5f5;box-shadow:0 3px 3px rgba(0,0,0,.1);

			.box_title{ 
				.title{
					color:#2f549f; 
					font:24px/40px "微软雅黑",Arial, Helvetica, sans-serif; 
					padding-left:15px; 
					text-shadow:0 1px 0 rgba(255,255,255,.9); 
					margin-bottom: 0;
				}
			}

			
		}

		/* 导航
		----------------------------------------*/
		.box_nav{ 
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}

		.btns{ 
			text-align:right; padding-top:5px; padding-right:10px;

			.button{ width:100px; text-align:center;}
		}

		.box_detail{ 
			border-top:1px solid #dbdbdb;
			border-bottom:1px solid #fff; 
			padding-top:10px;
			padding-bottom:10px; 
			margin-top:0; 
			margin-bottom:0; 
		}


		/* html 元素
		------------------------------------*/
		.image-wrap{
			display:block;
			box-shadow:1px 1px 3px rgba(0,0,0,.4);
			
			&.pic_small{
				border-radius: 25px;
			}
			&.pic_middle{
				border-radius: 50px;
			}
			&.pic_larger{
				border-radius: 125px;
			}
		}

		/* 继承主题
		------------------------------------------*/
		
		/* model蓝色 
		----------------------------------*/
		&.blue{
			@blue_color: #2f549f;
			&:hover{}
			.box_header{
				.box_title{
					color:#fff; 
					background:@blue_color url(../images/box_title.gif) no-repeat right 0;
					margin-left:-2px;
					text-shadow:1px 1px 2px rgba(0,0,0,.9);
				}
			}
			.box_nav ul li{
				&.backLava {
					border-bottom-color: @blue_color;
				}

				&.selected a{ 
					color:@blue_color;
				}
			}

		}

		/* model土黄 
		----------------------------------*/
		&.yellow{
			@yellow_color: #9f742f;
			&:hover{}
			.box_header{
				.box_title{
					color:#fff; 
					background:@yellow_color url(../images/box_title.gif) no-repeat right -40px; 
					margin-left:-2px;
					text-shadow:1px 1px 2px rgba(0,0,0,.9);
				}
			}
			.box_nav ul li{
				&.backLava {
					border-bottom-color: @yellow_color;
				}

				&.selected a{ 
					color:@yellow_color;
				}
			}
			
		}

		/* model绿色
		----------------------------------*/
		&.green{
			@green_color: #869f2f;
			&:hover{}
			.box_header{
				.box_title{
					color:#fff; 
					background:@green_color url(../images/box_title.gif) no-repeat right -80px; 
					margin-left:-2px;
					text-shadow:1px 1px 2px rgba(0,0,0,.9);
				}
			}
			.box_nav ul li{
				&.backLava {
					border-bottom-color: @green_color;
				}

				&.selected a{ 
					color:@green_color;
				}
			}
			
		}

		/* model紫色
		----------------------------------*/
		&.purple{
			@purple_color: #932f9f;
			&:hover{}
			.box_header{
				.box_title{
					color:#fff; 
					background:@purple_color url(../images/box_title.gif) no-repeat right -120px; 
					margin-left:-2px;
					text-shadow:1px 1px 2px rgba(0,0,0,.9);
				}
			}
			.box_nav ul li{
				&.backLava {
					border-bottom-color: @purple_color;
				}

				&.selected a{ 
					color:@purple_color;
				}
			}
			
		}

		/* model玫红
		----------------------------------*/
		&.rose{
			@rose_color: #AA3259;
			&:hover{}
			.box_header{
				.box_title{
					color:#fff; 
					background:@rose_color url(../images/box_title.gif) no-repeat right -160px; 
					margin-left:-2px;
					text-shadow:1px 1px 2px rgba(0,0,0,.9);
				}
			}
			.box_nav ul li{
				&.backLava {
					border-bottom-color: @rose_color;
				}

				&.selected a{ 
					color:@rose_color;
				}
			}
			
		}

		/* model青色
		----------------------------------*/
		&.cyan{
			@cyan_color: #307D9C;
			&:hover{}
			.box_header{
				.box_title{
					color:#fff; 
					background:@cyan_color url(../images/box_title.gif) no-repeat right -200px; 
					margin-left:-2px;
					text-shadow:1px 1px 2px rgba(0,0,0,.9);
				}
			}
			.box_nav ul li{
				&.backLava {
					border-bottom-color: @cyan_color;
				}

				&.selected a{ 
					color:@cyan_color;
				}
			}
			
		}
		/* 继承主题 end---------------------*/
	}


/* skins_factory
-----------------------------------------------------------------------------------------*/
	.skins_factory{
		@sf_bg:	"../images/skins_factory/bg.png";
		@sf_t:	"../images/skins_factory/light_t.png";
		background: #25262A  url("@{sf_bg}") left top no-repeat ;
		background-color: rgba(37, 38, 42,.95);
		border:1px solid rgba(0,0,0,.5);
		box-shadow:0 0 10px rgba(0,0,0,1);
		position: relative;
		z-index:1;
		font-family: "Hiragino Sans GB", "Microsoft Yahei","微软雅黑", sans-serif;
		color: #fff;
		&:before{
			background-color: #fff;
			content:"";
			width:1px;
			height:1px;
			position: absolute;
			z-index:1;
			left:0;
			top:0;
			moz-box-shadow:0 0 2px rgba(255,255,255,1);
			webkit-box-shadow:0 0 2px rgba(255,255,255,1);
			box-shadow:0 0 2px rgba(255,255,255,1);
		}
		&:after{
			background-color: rgba(255,255,255,.5);
			content:"";
			width:1px;
			height:1px;
			position: absolute;
			z-index:1;
			right:0;
			top:0;
		}

		/* 连接
		-----------------------------------------*/
		a{
			color: #95A6B6;
			&:link,&:visited,&:active,a:focus{
				text-decoration: none;
			}
			&:hover{
				color: #fff;
				text-decoration: underline;
			}
		}
		/* html 元素
		--------------------------------------------*/
		img,.image-wrap{
			border: 2px solid #1E2227;
			box-shadow:inset 0 0 2px #fff, 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.2),inset 1px 0 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.2),inset -1px 0 0 rgba(255,255,255,.2);
			border-radius: 5px;
			z-index:1;
			position: relative;
			&:before{
				position: absolute;
				z-index:1;
				content: ' ';
				width: 2px;
				height: 2px;
				top: 0;
				left: 0;
				background-color: #fff;
				border-radius:2px;
				box-shadow:0 0 2px #fff;
			}

			&:after{
				position: absolute;
				z-index:1;
				content: ' ';
				width: 100%;
				height: 50%;
				top: 0;
				left: 0;
			 
				-webkit-border-radius: 5px 5px 0 0;
				-moz-border-radius: 5px 5px 0 0;
				border-radius: 5px 5px 0 0;
			 
				background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,.1) 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,.1)));
				background: linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,.1) 100%);
			}
		}


		.inner{
			border:1px solid rgba(255,255,255,.3);
			
		}

		.box_header{
			background-color: rgba(0,0,0,.1);
			border-bottom:1px solid rgba(255,255,255,.15);
			
			&:before{
				content:"";
				background:url("@{sf_t}") no-repeat;
				width:94px;
				height:5px;
				position: absolute;
				z-index:1;
				top:-2px;
				left:70px;
			}
			.box_title{
				padding: 10px 20px;
				border-bottom: 1px solid rgba(0,0,0,.15);
				.title{
					display: inline-block;
					color: #fff;
					text-shadow: #000 0 0 5px;
					margin-bottom: 0;
					font-size:20px;
				}
			}
			
		}

		/* 导航
		----------------------------------------*/
		.box_nav{ 
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}

		.box_detail{
			padding: 20px;
		}

		.box_footer{
			color: #A1A9AD;
			padding:5px 20px;
			&:before{
				background-color: rgba(255,255,255,.5);
				content:"";
				width:1px;
				height:1px;
				position: absolute;
				z-index:1;
				left:0;
				bottom:0;
			}
			&:after{
				background-color: rgba(255,255,255,.5);
				content:"";
				width:1px;
				height:1px;
				position: absolute;
				z-index:1;
				right:0;
				bottom:0;
			}
		}
	}




/* blue_a_white
---------------------------------------------------------------------------------------------*/
	.blue_a_white{
		@bg:	"../images/blue_a_white/bg.png";
		@bottom:	"../images/blue_a_white/bottom.png";
		@light_b:	"../images/blue_a_white/light_b.png";
		@light_t:	"../images/blue_a_white/light_t.png";

		border:4px solid #039;
		border-radius:8px;
		box-shadow:0 15px 15px rgba(0,0,0,.3),inset 0 0 15px rgba(0,0,0,.5);
		background: #fff url("@{bg}") right top no-repeat;
		position: relative;
		z-index:1;
		color: #333;

		&:before{
			content:"";
			width:2px;
			height:2px;
			position: absolute;
			z-index:1;
			left:1px;
			top:1px;
			border-radius:2px;
			background-color: rgba(255,255,255,8);
			box-shadow:0 0 3px #fff;
		}

		&:hover{
			box-shadow:0 15px 15px rgba(0,0,0,.4),inset 0 0 15px rgba(0,0,0,.5);
			border-color: #06c;
		}
		/* html 元素
		--------------------------------------------*/
		.image-wrap{
			border:4px solid #039;
			border-color:rgba(0, 51, 153,.9);
			border-radius:5px;
			background-color: rgba(255,255,255,.2);
			box-shadow:0 15px 15px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4),inset 1px 0 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(255,255,255,.4);
			webkit-box-shadow:0 15px 15px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4),inset 1px 0 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(255,255,255,.4);
			moz-box-shadow:0 15px 15px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4),inset 1px 0 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(255,255,255,.4);
			position: relative;
			z-index:1;
			margin-bottom: 10px;

			&:before{
				content:"";
				width:92%;
				height:10px;
				position: absolute;
				z-index:1;
				bottom:-18px;
				left:0;
				-moz-border-image: url("@{light_b}")  4 2 0 stretch;
				-o-border-image: url("@{light_b}") 4 2 0 stretch;
				border-width: 4px;
				border-style: solid;
				border-color: transparent;
			}

			&:after{
				content:"";
				width:92%;
				height:4px;
				position: absolute;
				z-index:1;
				top:-4px;
				left:0;
				-moz-border-image: url("@{light_b}")  4 2 0 stretch;
				-o-border-image: url("@{light_b}") 4 2 0 stretch;
				border-width: 4px;
				border-style: solid;
				border-color: transparent;
			}
			
		}

		.inner{
			border:2px solid rgba(255,255,255,.4);
			border-radius:5px;
			background: url("@{bottom}") repeat;
			box-shadow:0 0 2px rgba(0,0,0,.8);
		}

		.box_header{
			.box_title{
				padding: 5px 10px;
				.title{ 
					color: #039;
					display: inline-block;
					text-shadow: 0 1px 1px #fff ;
					margin-bottom: 0;
				}
			}
		}

		/* 导航
		----------------------------------------*/
		.box_nav{ 
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}

		.box_detail{
			padding: 10px;
		}
		.box_footer{
			background-color: rgba(255,255,255,.2);
			box-shadow:0 -2px 10px rgba(0,0,0,.1);
			padding: 5px 10px;
			&:before{
				content:"";
				width:92%;
				height:15px;
				position: absolute;
				z-index:1;
				bottom:-23px;
				left:0;
				-moz-border-image: url("@{light_b}")  4 2 0 stretch;
				-o-border-image: url("@{light_b}") 4 2 0 stretch;
				border-width: 4px;
				border-style: solid;
				border-color: transparent;
			}
		}
	
	}

/* rigo_light
---------------------------------------------------------------------------------------------*/
	.rigo_light{
		border: 1px solid rgba(0,0,0,.3);
		background-color: rgba(255,255,255,.7);
		color: #676B7B;
		border-radius:10px;
		box-shadow:15px 15px 5px rgba(0,0,0,.2),5px 5px 10px rgba(255,255,255,.4);


		/* html 元素
		--------------------------------------------*/
		.image-wrap{
			border-radius:5px;
			box-shadow:inset 0 1px 0 rgba(0,0,0,.3),inset 1px 0 0 rgba(0,0,0,.3),inset 0 -1px 0 rgba(0,0,0,.3),inset -1px 0 0 rgba(0,0,0,.3);
			
		}


		.inner{
			border: 1px solid #fff;
			padding: 10px;
			border-radius:10px;
			background: -moz-linear-gradient(top, rgba(255,255,255,.8) 0%, rgba(255,255,255,.1) 30%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(30%,rgba(255,255,255,.1)));
			background: linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,.1) 30%);
		}

		/* 导航
		----------------------------------------*/
		.box_nav{ 
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}

	}


/* beach
---------------------------------------------------------------------------------------------*/

	.beach{
		@colors: #E9EEF2;
		@bg_t:	@colors url(../images/beach/image13.png) center top repeat-x;
		@bg_b:	url(../images/beach/image19.png) center bottom repeat-x;
		@bg_lt:	@colors url(../images/beach/image12.png) left top no-repeat;
		@bg_rt:	@colors url(../images/beach/image14.png) right top no-repeat;
		@bg_lb:	@colors url(../images/beach/image16.png) left bottom no-repeat;
		@bg_rb:	@colors url(../images/beach/image18.png) right bottom no-repeat;
		@bg_l:	@colors url(../images/beach/image17.png) left top repeat-y;
		@bg_r:	@colors url(../images/beach/image15.png) right top repeat-y;
		@bg_shadow: "../images/beach/image4.png";
		@shell:	url(../images/beach/image21.png) center bottom no-repeat;
		@sand1:	"../images/beach/image2.png";
		@sand2:	"../images/beach/image3.png";
		padding-left: 45px;
		background: @bg_l;
		position: relative;
		z-index:1;
		margin-bottom:50px;

		&:before{
				content:"";
				width:100%;
				height:116px;
				position: absolute;
				z-index:-2;
				bottom:-80px;
				left:0;
				-moz-border-image: url("@{sand1}")  0 80stretch;
				-webkit-border-image:url("@{sand1}")  0 80stretch;
				-o-border-image: url("@{sand1}") 0  80 stretch;
				border-width: 20px;
				border-style: solid;
				border-color: transparent;
			}
			&:after{
				content:"";
				width:100%;
				height:116px;
				position: absolute;
				z-index:-2;
				bottom:-130px;
				left:-10%;
				-moz-border-image: url("@{sand2}")  0 80 stretch;
				-webkit-border-image:url("@{sand2}")  0 80 stretch;
				-o-border-image: url("@{sand2}") 0 80 stretch;
				border-width: 80px;
				border-style: solid;
				border-color: transparent;
			}

		.inner{
			padding-right: 45px;
			background: @bg_r;
		}


		.box_header{
			padding-top: 44px;
			background: @bg_t;
			.title{
				padding: 10px 20px;
				margin-bottom: 0;
			}
			
			&:before{
				content:"";
				width:45px;
				height:44px;
				position: absolute;
				z-index:1;
				top:0;
				left:0;
				background: @bg_lt;
			}

			&:after{
				content:"";
				width:45px;
				height:44px;
				position: absolute;
				z-index:1;
				top:0;
				right:0;
				background: @bg_rt;
			}
		}

		/* 导航
		----------------------------------------*/
		.box_nav{ 
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}
		
		.box_detail{
			padding: 10px 20px;

			&:before{
				content:"";
				width:45px;
				height:43px;
				position: absolute;
				z-index:1;
				bottom:0;
				left:0;
				background: @bg_lb;
			}

			&:after{
					content:"";
					width:45px;
					height:43px;
					position: absolute;
					z-index:1;
					bottom:0;
					right:0;
					background: @bg_rb;
			}
		}

		.box_footer{
			padding: 20px;
			padding-bottom: 104px;
			background: @bg_b;
			&:before{
				content:"";
				width:100%;
				height:22px;
				position: absolute;
				z-index:-1;
				bottom:-10px;
				left:0;
				-moz-border-image: url("@{bg_shadow}")  4 0 0 stretch;
				-webkit-border-image:url("@{bg_shadow}")  4 0 0 stretch;
				-o-border-image: url("@{bg_shadow}") 4 0 0 stretch;
				border-width: 4px;
				border-style: solid;
				border-color: transparent;
			}

			&:after{
				content:"";
				width:225px;
				height:139px;
				position: absolute;
				z-index:1;
				bottom:-55px;
				left:1%;
				background: @shell;
			}
		}
	}

/* winbox
---------------------------------------------------------------------------------------------*/

	.winbox{
		background:#fff;
		border:1px solid #b7b7b7;
		box-shadow: 0 0 20px rgba(0,0,0,.2);
		
		

		.inner{ border:1px solid #fff;border-radius:7px; position:relative;z-index:1;zoom:1;}
		.box_header{
			background:#f7f7f7;
			-o-transition: all 0.2s ease-out 0.1s;
			-webkit-transition: all 0.2s ease-out 0.1s;
			-moz-transition: all 0.2s ease-out 0.1s;
			-ms-transition: all 0.2s ease-out 0.1s;
			transition: all 0.2s ease-out 0.1s;
			
			.box_title{ text-align:center;color:#fff;}
			.win_close { 
				  position:absolute; right:5px; top:-2px; font:bold 12px/15px '微软雅黑';
				a{
					color:#666;border:1px solid #b7b7b7; display:block;padding:2px 10px;text-decoration:none;border-radius:0 0 5px 5px;
					&:hover{background:#c00; border-color:#900; color:#fff;box-shadow:0 0 5px rgba(204, 0, 0,.5);}
				}
			}
			

			.title{ color:#333; font:bold 14px/25px "微软雅黑",Arial; margin-bottom:0;}
		}
		.box_detail{
			padding:10px;
			overflow:hidden;
			color:#333;
			border-top:1px solid #eee;
			border-bottom:1px solid #eee;
			-o-transition: all 0.2s ease-out 0.1s;
			-webkit-transition: all 0.2s ease-out 0.1s;
			-moz-transition: all 0.2s ease-out 0.1s;
			-ms-transition: all 0.2s ease-out 0.1s;
			transition: all 0.2s ease-out 0.1s;
			
			.detail{padding:20px; .font-size-rems(14);}
		}
		.box_footer{
			.clearfix;
			.font-size-rems(12);
			padding:10px;
			.t_r;
			color:#666;
			background:#f7f7f7;
			-o-transition: all 0.2s ease-out 0.1s;
			-webkit-transition: all 0.2s ease-out 0.1s;
			-moz-transition: all 0.2s ease-out 0.1s;
			-ms-transition: all 0.2s ease-out 0.1s;
			transition: all 0.2s ease-out 0.1s;
		}
		.loading_bar{width:100%;height:5px;
			.progress_bar{ height:5px}
		}
		.msg{ display:inline-block; .font-size-rems(12); vertical-align:middle;  }
		.btn_box{ white-space:nowrap; display:inline-block;vertical-align:middle;
			button{.ml_5;padding:2px 10px}
		}
	}

/* whitebox
------------------------------------------------*/
	.whitebox{
		background:#fff;
		.inner{.clearfix;}
		.box_header{
			.fl_l;
			.mr_20;
			.mb_20;
			.title{ color:#333; font:18px/25px "微软雅黑",Arial; margin-bottom:0;}
		}
		/* 导航
		----------------------------------------*/
		.box_nav{
			.fl_l;
			.mb_20;
			position:relative; 
			z-index:1;
			ul li{ 
				display:inline; 
				float:left;
				&.backLava {
					display:block; 
					float:none; 
					border-bottom-width: 3px;
					border-bottom-style: solid;
					border-bottom-color: #2f549f;
					margin:0;
					z-index:1; 
					bottom:0;
				}
				&.selected a{ 
					font-weight:bold;
					color:#2f549f;
				}
				a{
					display:block; 
					color:#333; 
					margin: 5px 0; 
					padding:0 10px; 
					line-height:15px; 
					border-right:1px solid #ccc; 
					position:relative; 
					z-index:2;
					&:hover{
						text-decoration:none;
					}
				}
			}
		}
	}














 


		







	
